<template>
    <div class="relative flex-center wh-full theme3">
        <!--        <dark-mode-switch-->
        <!--            :dark="theme.darkMode"-->
        <!--            class="absolute left-48px top-24px z-3 text-20px"-->
        <!--            @update:dark="theme.setDarkMode"-->
        <!--        />-->

        <div class="snow-container">
            <div class="snow foreground"></div>
            <div class="snow foreground layered"></div>
            <div class="snow middleground"></div>
            <div class="snow middleground layered"></div>
            <div class="snow background"></div>
            <div class="snow background layered"></div>
        </div>

        <div class="main-agileits shrink-0">
            <div class="form-w3-agile w-full flex-col justify-center items-center">
                <h2 class="sub-agileits-w3layouts">{{ appName }}</h2>
                <n-form
                    ref="formRef"
                    :model="model"
                    :rules="rules"
                    size="large"
                    :show-label="false"
                    class="w-full"
                >
                    <n-form-item path="username">
                        <n-input
                            v-model:value="model.username"
                            :placeholder="$t('page.login.common.userNamePlaceholder')"
                        >
                            <template #prefix>
                                <jb-icon
                                    icon="fa-solid:user"
                                    class="text-18px mr-8px"
                                    :inline="true"
                                ></jb-icon>
                            </template>
                        </n-input>
                    </n-form-item>
                    <n-form-item path="password">
                        <n-input
                            v-model:value="model.password"
                            type="password"
                            show-password-on="click"
                            :placeholder="$t('page.login.common.passwordPlaceholder')"
                        >
                            <template #prefix>
                                <jb-icon
                                    icon="solar:lock-password-bold"
                                    class="text-18px mr-8px"
                                    :inline="true"
                                ></jb-icon>
                            </template>
                        </n-input>
                    </n-form-item>
                    <n-form-item v-if="useCaptcha" path="captcha">
                        <n-input
                            v-model:value="model.captcha"
                            :placeholder="$t('page.login.codeLogin.imageCodePlaceholder')"
                            @keydown.enter="handleSubmit"
                        >
                            <template #prefix>
                                <jb-icon
                                    icon="solar:gallery-check-bold"
                                    class="text-18px mr-8px"
                                    :inline="true"
                                ></jb-icon>
                            </template>
                        </n-input>
                        <div class="pl-8px">
                            <image-verify v-model:value="model.jbcapkey" />
                        </div>
                    </n-form-item>
                    <n-space :vertical="true" :size="24">
                        <!--保持登录选项 -->
                        <!--            <div class="flex-y-center justify-between">-->
                        <!--                <n-checkbox v-model:checked="keepOn">{{-->
                        <!--                    $t('page.login.pwdLogin.rememberMe')-->
                        <!--                }}</n-checkbox>-->
                        <!--                &lt;!&ndash;                <n-button :text="true" @click="toLoginModule('reset-pwd')">&ndash;&gt;-->
                        <!--                &lt;!&ndash;                    {{ $t('page.login.pwdLogin.forgetPassword') }}&ndash;&gt;-->
                        <!--                &lt;!&ndash;                </n-button>&ndash;&gt;-->
                        <!--            </div>-->
                        <n-button
                            color="#4586eb"
                            size="large"
                            :block="true"
                            :loading="auth.loginLoading"
                            @click="handleSubmit"
                        >
                            {{ $t('page.login.common.confirm') }}
                        </n-button>
                    </n-space>
                </n-form>
            </div>
        </div>
        <copyright color="white"></copyright>
    </div>
</template>

<script setup lang="ts">
import { computed, type ComputedRef, reactive, ref } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { useAuthStore } from '@/store'
import { JBoltApi, randomCode, Rules } from '@/utils'
import { $t } from '@/locales'
import { md5 } from '@/utils/crypto'
import copyright from '../copyright/index.vue'
import { getServiceEnvConfig } from '~/.env-config'

const auth = useAuthStore()
const { loginByCaptcha } = useAuthStore()

const formRef = ref<HTMLElement & FormInst>()

const { loginPage } = getServiceEnvConfig(import.meta.env)
const appName = loginPage?.title
const formWidth: ComputedRef<string> = computed(() => {
    const loginWidth = loginPage?.formWidth

    let width = ''
    width = isNaN(Number(loginWidth)) ? `${loginWidth}` : `${loginWidth}px`

    return width
})

const useCaptcha = ref<boolean>(false)

const rules: FormRules = {
    username: new Rules().required('请输入用户名').value,
    password: new Rules().required('请输入密码').value
}

JBoltApi.get('/api/captcha/checkUse').then(({ result }) => {
    useCaptcha.value = result.data
    if (result.data) {
        rules.captcha = new Rules()
            .required('请输入验证码')
            .length(4, '请输入4位字符').value
    }
})

const model = reactive({
    username: '',
    password: '',
    captcha: '',
    jbcapkey: ''
})

// const keepOn = ref(false)

async function handleSubmit() {
    await formRef.value?.validate()
    model.password = randomCode(2) + md5(model.password) + randomCode(3)
    const { username, password, captcha, jbcapkey } = model

    loginByCaptcha(username, password, captcha, jbcapkey).catch(() => {
        model.password = ''
        model.captcha = ''
        model.jbcapkey = ''
    })
}
</script>

<style scoped lang="scss">
.theme3 {
    background-image: url('@/assets/imgs/_builtin/login_bg_theme3.avif');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1px;
    box-sizing: border-box;
    z-index: 1;
    overflow: hidden;
}

.theme3
    :deep(
        .n-form-item
            .n-form-item-feedback-wrapper
            .n-form-item-feedback.n-form-item-feedback--error
    ) {
    color: #ff5d5d;
}

.main-agileits {
    width: v-bind('formWidth');
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

h2.sub-agileits-w3layouts,
h3.sub-agileits-w3layouts {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 2em;
    letter-spacing: 2px;
}

.form-w3-agile {
    background: rgba(41, 39, 39, 0.46);
    -webkit-box-shadow: 0px 35px 44px -22px rgba(0, 0, 0, 0.72);
    -moz-box-shadow: 0px 35px 44px -22px rgba(0, 0, 0, 0.72);
    box-shadow: 0px 35px 44px -22px #1f181b;
    padding: 60px 40px;
}

.snow-container {
    position: absolute;
    height: 794px;
    width: 100%;
    max-width: 100%;
    height: 100%;
    top: 0;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
    background-color: #000;
    opacity: 0.2;
}

.snow-container.two {
    height: 440px;
}

.snow {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    -webkit-animation: snow linear infinite;
    animation: snow linear infinite;
}

.snow.foreground {
    background-image: url('@/assets/imgs/_builtin/1.png');
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
}

.snow.foreground.layered {
    -webkit-animation-delay: 7.5s;
    animation-delay: 7.5s;
}

.snow.middleground {
    background-image: url('@/assets/imgs/_builtin/2.png');
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
}

.snow.middleground.layered {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}

.snow.background {
    background-image: url('@/assets/imgs/_builtin/3.png');
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
}

.snow.background.layered {
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
}

@-webkit-keyframes snow {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        -webkit-transform: translate3d(15%, 100%, 0);
        transform: translate3d(15%, 100%, 0);
    }
}

@keyframes snow {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        -webkit-transform: translate3d(15%, 100%, 0);
        transform: translate3d(15%, 100%, 0);
    }
}

@media (max-width: 1366px) {
    .snow-container {
        position: absolute;
        height: 628px;
    }
}

@media (max-width: 1280px) {
    .snow-container {
        position: absolute;
        height: 578px;
    }
}

@media (max-width: 1080px) {
    .snow-container {
        position: absolute;
        height: 498px;
    }
}

@media (max-width: 1054px) {
}

@media (max-width: 1024px) {
}

@media (max-width: 991px) {
    .snow-container.two {
        height: 365px;
    }
}

@media (max-width: 800px) {
    .snow-container {
        position: absolute;
        height: 375px;
    }
    .snow-container.two {
        height: 352px;
    }
}

@media (max-width: 768px) {
    .snow-container {
        position: absolute;
        height: 373px;
    }
}

@media (max-width: 640px) {
}

@media (max-width: 480px) {
}

@media (max-width: 414px) {
}

@media (max-width: 384px) {
}
</style>
